$c: rgba(80, 80, 80, 0.1);

.vux-1px,
.vux-1px-t,
.vux-1px-b,
.vux-1px-tb,
.vux-1px-l,
.vux-1px-r {
	position: relative;
}

.vux-1px {
	&:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		width: 200%;
		border: 1px solid $c;
		color: $c;
		height: 200%;
		transform-origin: left top;
		transform: scale(0.5);
	}
}

.vux-1px-t {
	&:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid $c;
		color: $c;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
}

.vux-1px-b {
	&:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid $c;
		color: $c;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}
}

.vux-1px-tb {
	&:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid $c;
		color: $c;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	&:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid $c;
		color: $c;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}
}

.vux-1px-l {
	&:before {
		content: ' ';
		position: absolute;
		left: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-left: 1px solid $c;
		color: $c;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}
}

.vux-1px-r {
	&:after {
		content: ' ';
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-right: 1px solid $c;
		color: $c;
		transform-origin: 100% 0;
		transform: scaleX(0.5);
	}
}
